"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/12/21
 */
import * as React from 'react'
import {commonProps, commonStyles} from "../../assets/styles/common";
import Colors from "../../assets/styles/Colors";
import NavBackButton from "../../component/BackButton";
import {ChatPage} from "../../interface/router";
import MyText from "../../component/MyText";
import constant from "../../utils/constant";
import Avatar from "../../component/Avatar";
import Request from "../../utils/Request";

const {View, DeviceEventEmitter} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
const {GiftedChat} = require('react-native-gifted-chat');

class Page extends React.Component<ChatPage, any> {


    constructor(props: any, context: any) {
        super(props, context);
        this.state = {
            message: []
        }
    }

    componentDidMount(): void {
        // DeviceEventEmitter.emit(constant.noticeKeyOfSubscriptMessage, {
        //     receiver: this.props.receiver,
        //     sender: this.props.auth.userInfo.account
        // });

        this.props.dispatch({
            type:'chat/clearList'
        });

        this.props.dispatch({
            type: 'chat/fetchMessageList',
            payload: {
                receiver: this.props.receiver,
                pi: 1,
                ps: 20
            }
        });

        this.props.dispatch({
            type: 'message/readMessageFromUser',
            payload: {
                receiver: this.props.receiver,
            }
        })
    }


    componentWillUnmount(): void {
        // DeviceEventEmitter.emit(constant.noticeKeyOfRemoveSubscriptMessage, {
        //     receiver: this.props.receiver,
        //     sender: this.props.auth.userInfo.account
        // });
    }
    onSend(messages = []) {
        DeviceEventEmitter.emit(constant.noticeKeyOfSendMessage, {
            receiver: this.props.receiver,
            sender: this.props.auth.userInfo.account,
            message: messages[0],
            nickname: this.props.auth.userInfo.nickName,
            avatar: this.props.auth.userInfo.avatar || '',
        });
    }

    onLoadMore = (loadmore) => {
        if (!this.props.chat.messageList.last) {
            this.props.dispatch({
                type: 'chat/fetchMessageList',
                payload: {
                    receiver: this.props.receiver,
                    pi: this.props.chat.messageList.number + 2,
                    ps: 20,
                    loadmore: true
                }
            });
        }
    };


    renderLoading = () => {
        return (
            <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                <MyText>初始化中...</MyText>
            </View>
        )
    };

    render() {
        return (
            <View style={[commonStyles.container, {backgroundColor: Colors.White}]}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton/>}
                               title={{title: this.props.title, tintColor: '#fff'}}
                />
                <GiftedChat
                    messages={this.props.chat.messageList ? this.props.chat.messageList.content : []}
                    onSend={(messages) => this.onSend(messages)}
                    renderLoading={this.renderLoading}
                    onLoadEarlier={this.onLoadMore}
                    loadEarlier={true}
                    isLoadingEarlier={this.props.chat.loading}
                    user={{
                        _id: this.props.auth.userInfo.account,
                    }}
                />
            </View>
        );
    }
}


export default connect(
    ({auth, chat}) => ({auth, chat})
)(Page);